<template>
  <div class="main-box" @dragenter="mainBoxDragEnterAndOver" @dragover="mainBoxDragEnterAndOver">
    <div class="box" @drop="boxDropHandler">
      <el-tag class="sel-item"
              draggable="true"
              v-for="(item, index) in selectDataList"
              closable
              key="index"
              @close="handleSelItemClose(item)">
        {{item.label}}
      </el-tag>

    </div>

    <el-tree
        id="myTree"
        style="width: 130px"
        :data="data"
        node-key="id"
        default-expand-all
        @node-drag-start="handleDragStart"
        @node-drag-enter="handleDragEnter"
        @node-drag-leave="handleDragLeave"
        @node-drag-over="handleDragOver"
        @node-drag-end="handleDragEnd"
        @node-drop="handleDrop"
        draggable
        :allow-drop="allowDrop"
        :allow-drag="allowDrag">
    </el-tree>
  </div>
</template>

<script>
export default {
  name: "TreeNodeDrag",
  data() {
    return {
      data: [
        {
          id: '1',
          label: '简单类型',
          children: [
            {id: '1-1', label: '字符串'},
            {id: '1-2', label: '整数'},
            {id: '1-3', label: '小数'},
          ]
        },
        {
          id: '2',
          label: '文件类型',
          children: [
            {id: '2-1', label: 'png图片'},
            {id: '2-2', label: 'jpg图片'},
            {id: '2-3', label: 'CPTPart'},
          ]
        },
        {
          id: '3',
          label: '集合类型',
          children: [

          ]
        }
      ],
      currSelNode: null,
      selectDataList: [],
    }
  },

  methods: {
    handleDragStart(node, ev) {
      let dom = ev.target;
      dom.style.border = '1px solid #bdbdbd';
      this.currSelNode = node;
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      console.log(ev.target);
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      // console.log('tree drag leave: ', dropNode.label);
    },
    handleDragOver(draggingNode, dropNode, ev) {
      let treeDom = document.getElementById('myTree');
      treeDom.classList.remove('is-drop-not-allow');
      ev.dataTransfer.effectAllowed = 'move';
      ev.dataTransfer.dropEffect = 'move';
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // console.log('tree drag end: ', dropNode && dropNode.label, dropType);
      ev.target.style.border = 'none';
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      console.log('tree drop: ', dropNode.label, dropType);
    },
    allowDrop() {
      return false;
    },
    allowDrag() {
      return true;
    },

    mainBoxDragEnterAndOver(ev) {
      ev.preventDefault();
      ev.dataTransfer.effectAllowed = 'move';
      ev.dataTransfer.dropEffect = 'move';
    },

    boxDropHandler(ev) {
      // console.log(this.currSelNode);
      if (!this.currSelNode || !this.currSelNode.isLeaf) {
        return;
      }
      this.selectDataList.push({
        id: this.currSelNode.data.id,
        label: this.currSelNode.data.label
      })
    },

    handleSelItemClose(tag) {
      this.selectDataList.splice(this.selectDataList.indexOf(tag), 1);
    }

  }
}
</script>

<style scoped>
  .box {
    width: 950px;
    height: 36px;
    border: 2px solid #bdbdbd;
    margin-top: 10px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .tree-node-dragging {
    border: 1px solid #bdbdbd;
    box-shadow: inset 1px 1px 1px 1px #bdbdbd;
  }

  .el-tree-node__content>.el-tree-node__expand-icon {
    padding: 0;
  }

  .sel-item {
    height: 28px;
    text-align: center;
    line-height: 28px;
    margin-right: 10px;
    cursor: pointer;
  }

</style>